<template>
  <div class="page-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>黑马面经运营后台</span>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ '列表内容 ' + o }}
      </div>
    </el-card>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.page-container {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: url("https://tse4-mm.cn.bing.net/th/id/OIP-C.P0r_qUpSuFKNx35mdod5LQHaEK?pid=ImgDet&rs=1");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.box-card {
  width: 33%;
  border: 0;
}

::v-deep .el-card__header {
  background-color: #727cf5;
  text-align: center;
  color: #fff;
}
</style>
